<template>
  <Modal v-if="showModal" v-model="showModal" title="STEP 编辑" :styles="styles" @on-ok="closeWithSave"
         @on-cancel="closeWithoutSave" class-name="step-dialog">
    <component :is="currentView" ref="child" @ModalOpened="fitStyle"></component>
    <div slot="footer">
      <el-button @click="closeWithoutSave">取消</el-button>
      <el-button type="primary" @click="closeWithSave">确定</el-button>
    </div>
  </Modal>
</template>
<style>
  /*.step-dialog>div{
    width: fit-content!important;
  }*/
  .ivu-modal {
    top: 20px !important;
  }
</style>
<script>
  import store from "../store/store";
  import {mapState} from 'vuex';
  import valid from '../model/FormValidator';
  import Modal from '../components/Modal.vue';

  export default{
    store,
    computed: mapState({
      showModal: state => state.step.editModal.openWin,
      currentView: state => state.step.editModal.currentView,
      activeNode: state => state.step.editModal.activeNode,

    }),
    data(){
      return {
        modal1: true,
        styles: {}
      }
    },
    components: {
      Modal
    },
    methods: {
      closeWithoutSave(){
        this.$store.commit('saveData', false);
        this.$store.commit('closeWin');
      },
      closeWithSave(){
        let beforeSave = this.$refs.child.beforeSave;
        if (beforeSave) {
          /*console.log("beforeSave");*/
          beforeSave(this.save);
        } else {
          this.save();
        }
      },
      fitStyle (customParams) {
        if (customParams && customParams.width) {
          this.$set(this.styles, 'width', customParams.width)
        }
        //
        else if (navigator.userAgent.search("Trident") === -1 && navigator.userAgent.search("Edge")===-1) {
          this.$set(this.styles, 'width', "fit-content")
        }
        else
          this.styles = {}
      },
      save(){
        let s = this.currentView, validFunc = valid[s], stepInfo = this.$refs.child.step;
        if (validFunc) {
          validFunc(stepInfo, (errors, fields) => {
            if (errors) {
              this.$message.error(errors[0].message);
              this.$store.commit('saveData', false);
              return
            }
            this.$store.commit('saveData', true);
            this.$store.commit('closeWin');
          });
        } else {
          //不校验直接提交
          this.$store.commit('saveData', true);
          this.$store.commit('closeWin');
        }

      }
    }
  }
</script>
